<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Login page</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"/>
</head>
<body>
<div class="container">
    <form th:action="@{/login}" method="post" class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <div>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" name="username"
                   th:class="${loginError} ? 'form-control is-invalid' : 'form-control'" placeholder="Username"
                   required="required"
                   autofocus="autofocus"/>
            <div class="invalid-feedback" th:if="${loginError}">
                Wrong username or password
                <span th:text="${error}" ></span>
            </div>
        </div>
        <div>
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="Password"
                   required="required"/>
        </div>
        <div>
            <input type="checkbox" name="remember-me"/>  Remember me
        </div>
        <button class="btn btn-success btn-block" type="submit">Sign in</button>
        <a href="/index" th:href="@{/index}" class="btn btn-primary btn-block">Back to Home page</a>
    </form>
</div>
</body>
</html>